<template>
  <div class="income">
    <div class="header">
      <a-breadcrumb>
        <a-breadcrumb-item><a @click="navBack">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item>我的资源</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div>
  
        <a-spin tip="Loading..." :spinning="state.loading">
        <div class="row" v-show="state.incomeList.length > 0">
          <div
            class="col-xl-6 mb-4"
            v-for="(childrenItem, childrenIndex) of state.incomeList"
            :key="childrenIndex"
          >
            <div class="card card_box">
              <a-tag
                class="card_state"
                :color="colorState(childrenItem.pu_type)"
                v-html="cardShowState(childrenItem.pu_type)"
              ></a-tag>
              <!-- <a-tag color="#f50">#f50</a-tag> -->

              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div class="d-flex align-items-center">
                    <a-image
                      :src="formartImg(childrenItem.pu_order_screenshot)"
                      style="
                        width: 45px;
                        height: 45px;
                        border-bottom: 1px solid #212529;
                      "
                      class="rounded-circle"
                      :placeholder="true"
                    />"
                    <!-- <img :src="childrenItem.pu_order_screenshot" alt="" style="width: 45px; height: 45px" class="rounded-circle" /> -->
                    <div class="ms-3">
                      <p class="fw-bold mb-1">{{ childrenItem.pu_title }}</p>
                      <p class="text-muted mb-0 card_text">
                        {{ childrenItem.pu_description }}
                      </p>
                    </div>
                  </div>
                  <span class="badge rounded-pill badge-success">Active</span>
                </div>
              </div>
              <div
                class="card-footer border-0 bg-body-tertiary p-2 d-flex justify-content-around"
              >
                <a-button
                  type="primary"
                  role="button"
                  @click="editText(childrenItem.id)"
                  >编辑</a-button
                >
                <a-button
                  type="primary"
                  role="button"
                  danger
                  @click="changeStateType(childrenItem.id, '5')"
                  v-if="childrenItem.pu_type != '5'"
                  >下架</a-button
                >
                <a-button
                  role="button"
                  style="background-color: #87d068"
                  type="primary"
                  @click="changeStateType(childrenItem.id, '1')"
                  v-if="childrenItem.pu_type == '5'"
                  >发布</a-button
                >
              </div>
            </div>
          </div>
          <div class="loadding_box" id="loadding_box"> 
            <a-spin :indicator="indicator" /> 
          </div>
        </div>
        <div class="empty"  v-if="state.incomeList.length == 0">
          <a-empty description="还没有发布哦" />
          <br />
          <a-button type="primary" @click="goPush">去发布</a-button>
        </div>
      </a-spin>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, h, onMounted, watch } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { myPublish } from "@/api/user/index";
import type { RouteLocationNormalized } from "vue-router";
import { publishStatus } from "@/api/mutualaid/index";
import { LoadingOutlined } from '@ant-design/icons-vue';
const router = useRouter();
interface incomeListType {
  pu_id: number;
  pu_title: string;
  pu_description: string;
  pu_order_screenshot: string;
  id: string;
  pu_type: string;
}
const state = reactive({
  incomeList: [] as incomeListType[],
  loading: true,
});
const page = ref(0);
const title = ref<string>(router.currentRoute.value.query.title as string);
let ob = ref<IntersectionObserver | null>(null)
const formartImg = (imglist: string): any => {
  if (imglist === undefined) {
    return "";
  }
  var imglist1 = imglist.split(",");
  return imglist1[0];
};

const  indicator = ref(h(LoadingOutlined, {
  style: {
    fontSize: '24px',
  },
  spin: true,
}));
const cardShowState = (type: string) => {
  // <!-- 单子状态:1发布，2被接取，3接取的人点击完成（待核对），4发布的人点击完成（已完成），5未完成（下架，前台不展示），6待发布（下架，前台不展示（编辑的可以立即发布或者稍后发布） -->

  switch (type) {
    case "1":
      return `已发布`;
    case "2":
      return "被接取";
    case "3":
      return "接取的人点击完成（待核对）";
    case "4":
      return "发布的人点击完成（已完成）";
    case "5":
      return "已下架";
    case "6":
      return "待发布（下架，前台不展示（编辑的可以立即}";
  }
};
const colorState = (type: string): any => {
  // <!-- 单子状态:1发布，2被接取，3接取的人点击完成（待核对），4发布的人点击完成（已完成），5未完成（下架，前台不展示），6待发布（下架，前台不展示（编辑的可以立即发布或者稍后发布） -->

  switch (type) {
    case "1":
      return "#1677ff";
    case "2":
      return "#f50";
    case "3":
      return "#f50";
    case "4":
      return "#f50";
    case "5":
      return "#f50";
    case "6":
      return "#f50";
  }
};
const goPush = () => {
  router.push({ path: `/publishingresources` });
};
// onMounted(async () => {
//   const res = await myPublish({
//     page: 1,
//     limit: 10,
//   });
//   // 
//   if (res.data.code != 0)
//     return message.error({
//       content: res.data.msg,
//     });
//   state.incomeList = res.data.data.data;
//   state.loading = false;
// });
onMounted(() => {
 
 page.value += 1;

 ob.value = new IntersectionObserver(entries => {
     const en = entries[0];
     if(en.isIntersecting) {
         if(state.incomeList.length != 0) {
             page.value += 1;
         }
     }
 }, {
     threshold: .1
 })
  ob.value.observe(document.querySelector('#loadding_box')!)
  state.loading = false;
})

watch(() => page.value, async () => {
const res = await myPublish({
     page: page.value,
     limit: 10,
     
 })
 if(res.data.data.data.length < 8) {
   
   state.incomeList.push(...res.data.data.data); 
   ob.value!.disconnect();
   indicator.value = h('span', {
     style: {
         fontSize: '14px',
         width: '100%',
         color: "#000"
     },
  
 },"暂无更多数据");
 } else {
   state.incomeList.push(...res.data.data.data);
 }
})
const navBack = () => {
  router.go(-1);
};
const editText = (id: string) => {
  router.push({ path: `/editresources`, query: { id: id } });
};

const changeStateType = async (id: string, state: string) => {
  const key = "加载中…………";

  message.loading({ content: "Loading...", key });

  const res = await publishStatus({
    id: id + "",
    pu_type: state + "",
  });
  if (res.data.code != 0)
    return message.error({
      content: res.data.msg,
      key,
      duration: 2,
    });

  router.go(0);
  message.success({
    content: "操作成功",
    key,
    duration: 2,
  });
  // message.success({ content: '操作成功', key, duration: 2 });
  // setTimeout(() => {
  //   message.success({ content: '删除成功', key, duration: 2 });
  // }, 1000);
  // page.value = 1
};
</script>

<style lang="scss" scoped>
    .loadding_box {
        height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    }
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
.empty {
  height: 400px;
  padding: 100px;
  text-align: center;
}

.income {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px;

  .header {  
    margin: 30px 0;
  }

  .card_box {
    cursor: pointer;
    transition: all 0.2s;
    position: relative;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 2px 2px 2px #eee;
      border: 1px solid #1677ff;
    }

    .card_state {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .card_text {
      width: auto;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 46px;
    }
  }
}
</style>